import IconFont from "@/components/IconFont";
import { Avatar, Button, Col, Divider, Flex, Popover, Row, Skeleton, Space, Tooltip, Typography, theme } from "antd";
import React, { useEffect, useState } from "react";
const { getDesignToken, useToken } = theme;
const globalToken = getDesignToken();
import NotificationDropdown from "@/components/Notification";
import styles from "./index.module.less";
import { AvatarDropdown } from "@/components/AvatarDropdown/AvatarDropdown";
import TaskDrawer from "@/components/TaskDrawer";
import useFetchUserInfo from "@/hooks/useFetchUserInfo";
import { RootState, useSelector } from "@/store";
import { useNetwork } from "ahooks";
const Navbar: React.FC<any> = ({ leftChildren, rightChildren }) => {
	const { userInfo, isLoading } = useFetchUserInfo();
	const { token } = useToken();
	return (
		<>
			<div className="flx-justify-between" style={{ height: "100%" }}>
				{leftChildren}
				{rightChildren ? (
					rightChildren
				) : (
					<div className={styles.right}>
						<div className={styles.notice}>
							<NotificationDropdown />
						</div>
						<TaskDrawer />
						{isLoading ? (
							<Space style={{ height: 44, lineHeight: "22px" }}>
								<Skeleton.Avatar active shape="circle" />
								<Skeleton.Input active />
							</Space>
						) : (
							<AvatarDropdown>
								<div className={styles.info}>
									<Avatar size={28} src={userInfo?.user?.avatar} />
									<Typography className="sle" style={{ marginInlineStart: "8px" }}>
										{userInfo?.user?.realName}
									</Typography>
								</div>
							</AvatarDropdown>
						)}
					</div>
				)}
			</div>
		</>
	);
};
export default Navbar;
